<script setup lang="ts">
import { Logo } from '@fl/components'
import { genOssUrl, oss } from '@fl/logics/oss'

const sloganImg = genOssUrl(oss.mall.slogan)
const loginImg = genOssUrl(oss.mall.login)

const currentYear = computed(() => new Date().getFullYear())
</script>

<template>
    <el-scrollbar view-class="h-full">
        <div class="flex flex-col h-full min-h-1100 w-full">
            <div class="bg-white h-120 w-full">
                <div class="px-80 py-30 mx-auto flex w-1300 items-center">
                    <Logo :size="60" />

                    <div class="ml-16 flex flex-col justify-between">
                        <div i-custom-anju-calligraphy
                             class="fill-current text-black h-30 w-100"
                        />

                        <div i-custom-anju-link
                             class="mt-8 fill-current text-black h-16 w-100"
                        />
                    </div>
                </div>
            </div>

            <div class="mx-auto flex flex-1 h-700 w-1300 items-center">
                <div class="flex flex-col items-center">
                    <img :src="sloganImg"
                         class="h-88 w-625"
                    >

                    <img :src="loginImg"
                         class="mt-40 h-420 w-1000"
                    >
                </div>

                <slot />
            </div>

            <div class="bg-white h-170 w-full">
                <div class="px-80 mx-auto flex h-full w-1300 items-center">
                    <div class="flex flex-col">
                        <div class="text-16 text-#aaaaaa font-400">
                            武汉安居供应链有限公司
                        </div>

                        <div class="space-x-8 mt-16 text-14 text-#767676 font-400 flex">
                            <span>网络经营许可证</span>

                            <span>©Copyright {{ currentYear }} 安居链 版权所有</span>
                        </div>

                        <a class="mt-8 text-14 text-red font-400"
                           href="https://beian.miit.gov.cn/"
                           target="_blank"
                        >
                            鄂ICP备2023030090号
                        </a>
                    </div>

                    <div class="space-x-40 ml-auto flex">
                        <div class="mr-40 text-16 text-#aaaaaa font-400 flex flex-col items-center">
                            <div class="flex size-110 justify-center items-center">
                                <img src="https://public-obs-cdn.anjulian.com.cn/2024-06-14/9a7c49af-e179-4ba5-8e78-edaf76aff3d9.jpg"
                                     alt="安居链小程序"
                                >
                            </div>

                            <div>安居链小程序</div>
                        </div>

                        <div class="mr-40 text-16 text-#aaaaaa font-400 flex flex-col items-center">
                            <div class="flex size-110 justify-center items-center">
                                <img src="https://public-obs-cdn.anjulian.com.cn/2024-06-14/00b86881-7dc5-4001-b204-6676fabdb484.jpg"
                                     alt="安居链公众号"
                                >
                            </div>

                            <div>安居链公众号</div>
                        </div>

                        <div class="text-16 text-#aaaaaa font-400 flex flex-col items-center">
                            <div class="flex size-110 justify-center items-center">
                                <img src="https://public-obs-cdn.anjulian.com.cn/2024-06-14/110e53c2-e302-47bb-a8f3-0a42d16ea012.jpg"
                                     alt="安居链APP"
                                >
                            </div>

                            <div>安居链APP</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </el-scrollbar>
</template>
